<!-- 页面 -->
<template>
    <div class="shou">
       <tou :toto="toto"></tou>
        <van-swipe class="my-swipe" indicator-color="white">
            <van-swipe-item v-for="(item, index) in img1" :key="index">
                <img class="imim" :src=item.image_src>
            </van-swipe-item>
        </van-swipe>
        <van-row>
            <van-col span="6" v-for="(item, index) in dao" :key="index">
                <img class="daoim" :src=item.image_src alt="">
            </van-col>
        </van-row>

        <van-row style="margin-top: 10px;" v-for="(item, index) in lou" :key="index">
            <van-col><img class="louimg" :src=item.floor_title.image_src>
                <!-- <div class="immm"> -->
                    <van-row >
                        <van-col span="8" v-for="(item1, index1) in item.product_list" :key="index1"><img class="louimg2" :src=item1.image_src></van-col>
                    </van-row>
                    
                <!-- </div> -->
            </van-col>
        </van-row>

<di :active="active"></di>

        
    </div>
</template>
<!-- vue -->
<script>
import tou from '@/components/tou.vue'
import di from '@/components/di.vue'
export default {
    components:{
        tou,
        di
    },
    data() {
        return {
            // 声明的属性
            img1: [],
            dao: [],
            lou: [],
            active: 0,
            toto:'优选商城'
        }
    },
    //生命周期函数
    mounted() {
        this.$axios.get('https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',).then(res => {
            res.data.message.forEach(item => {
                this.img1.push(item)
            })
        })
        this.$axios.get('https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',).then(res => {
            res.data.message.forEach(item => {
                this.dao.push(item)
            })
        })
        this.$axios.get('https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',).then(res => {
            res.data.message.forEach(item => {
                this.lou.push(item)
            })
            console.log(this.lou);
        })
    },
    // 调用方法
    methods: {
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style>
.shou {
    width: 100%;
    height: 100%;
}

.shou .imim {
    width: 100%;
    height: 100%;
}

.shou .daoim {
    width: 100%;
}

.shou .louimg {
    width: 100vw;
}

.shou .immm {
    width: 100%;

}

.shou .louimg2{
    width: 100%;
}
</style>